<template>
  <div class="home-view">
    <div class="menu">
      <ul @click="handleClick">
        <router-link to="button"><li data-name="button" :class="cur == 'button' ? 'cur' : undefined">按钮</li></router-link>
        <router-link to="checkBox"><li data-name="checkBox" :class="cur == 'checkBox' ? 'cur' : undefined">复选框</li></router-link>
        <router-link to="transfer"><li data-name="transfer" :class="cur == 'transfer' ? 'cur' : undefined">穿梭框</li></router-link>
        <router-link to="collapse"><li data-name="collapse" :class="cur == 'collapse' ? 'cur' : undefined">折叠板</li></router-link>
        <router-link to="form"><li data-name="form" :class="cur == 'form' ? 'cur' : undefined">form表单</li></router-link>
        <router-link to="layout"><li data-name="layout" :class="cur == 'layout' ? 'cur' : undefined">layout布局</li></router-link>
        <router-link to="message"><li data-name="message" :class="cur == 'message' ? 'cur' : undefined">message消息弹框</li></router-link>
        <router-link to="select"><li data-name="select" :class="cur == 'select' ? 'cur' : undefined">下拉框</li></router-link>
        <router-link to="textarea"><li data-name="textarea" :class="cur == 'textarea' ? 'cur' : undefined">输入框</li></router-link>
      </ul>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const cur = ref(sessionStorage.getItem('cur') || 'button')

const handleClick = (e) => { 
  cur.value = e.target.dataset.name
  sessionStorage.setItem('cur',e.target.dataset.name)
}
</script>

<style lang="scss" scoped>
.home-view{
  display: flex;
  .menu{
    width: 250px;
    height: 100%;
    box-shadow: 1px 0px 0px gray,-1px 0px 0px gray;
    // box-sizing: border-box;
    margin-right: 10px;
    ul,li{
      list-style: none;
      padding: 0;
    }
    a{
      text-decoration: none;
    }
    li{
      padding: 20px 30px;
      &.cur{
        background: #eee;
      }
    }
  }
  .main{
    flex: 1;
    height: 100%;
  }
}
</style>